<!DOCTYPE html>
<html lang="en" xml:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>床位申请</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        .position {
            display: inline-block;
        }

        .position > div {
            margin: 7px;
            width: 273px;
            height: 120px;
            display: inline-block;
            text-align: center;
            border-radius: 4px;
            line-height: 30px;
            box-shadow: 0 1px 3px 0 rgba(18, 18, 18, 0.1);
        }
    </style>
</head>
<body>
<div class="layui-container" style="width:900px;height: 100%">
    <form class="layui-form layui-form-pane" action="" lay-filter="userInfo">
        <input name="id" hidden>
        <input name="studentId" th:value="${entity.id}" hidden>
        <div class="layui-form-item">
            <div class="layui-form-label ">校区</div>
            <div class="layui-input-block">
                <select name="campusId" id="campusId" lay-verify="" lay-search lay-filter="change">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-label ">公寓楼</div>
            <div class="layui-input-block">
                <select name="buildingId" id="buildingId" lay-verify="" lay-search lay-filter="change2">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">寝室</label>
            <div class="layui-input-block">
                <select name="roomId" id="roomId" lay-verify="" lay-search lay-filter="changeRoomId">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-label ">床位</div>
            <div class="layui-input-block">
            </div>
            <div class="position" id="position">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
            </div>
        </div>
    </form>
</div>
</body>

<script src="/layui/layui.js"></script>
<script src="/js/core.util.js"></script>
<script>
    layui.use(['jquery', 'form'], function () {
        var layer = layui.layer;
        var $ = layui.jquery;
        var form = layui.form;
        CoreUtil.sendAjax("/dormitory/campus/options", null, function (res) {
            $("#campusId").html("");
            if (res.list != null) {
                let list = res.list;
                let indicators = $("#campusId");
                indicators.append("<option>请选择</option>")
                list.map(value => {
                    indicators.append(" <option value=\"" + value.id + "\">" + value.name + "</option>")
                })
            }
            form.render();
        }, "GET", false);
        form.on('select(change)', (data) => {
            $("#buildingId").html("")
            console.log(data)
            if(data.value!=="请选择"){
                CoreUtil.sendAjax("/dormitory/building/options", {campusId: data.value}, function (res) {
                    if (res.list != null) {
                        let list = res.list;
                        let indicators = $("#buildingId");
                        indicators.append("<option>请选择</option>")
                        list.map(value => {
                            indicators.append(" <option value=\"" + value.id + "\">" + value.name + "</option>")
                        })
                    }
                    form.render();
                }, "GET", false);
            }

        })

        form.on('select(change2)', (data) => {
            $("#roomId").html("")
            console.log(data)
            if(data.value!=="请选择"){
                CoreUtil.sendAjax("/dormitory/room/options", {buildingId: data.value}, function (res) {
                    if (res.list != null) {
                        let list = res.list;
                        let indicators = $("#roomId");
                        indicators.append("<option>请选择</option>")
                        list.map(value => {
                            indicators.append(" <option value=\"" + value.id + "\">" + value.name + "</option>")
                        })
                    }
                    form.render();
                }, "GET", false);
            }

        })


        form.on('select(changeRoomId)', (data) => {
            $("#position").html("")
            if (data.value !== "请选择") {
                CoreUtil.sendAjax("/dormitory/position/options", {roomId: data.value}, function (res) {
                    if (res.list != null) {
                        let list = res.list;
                        list.map((data) => {
                            $("#position").append(
                                `
                                 <div>
                                    <div>床位：${data.position}</div>
                                    <div>${"空"}</div>
                                    <a class="layui-btn layui-btn-primary layui-border-green">  <input type="radio" name="positionId" value="${data.id}" title="预约" class="layui-input"></a>
                                 </div>
                            `
                            )
                        })
                    }
                    form.render();
                }, "GET", false);
            }
        })
        //监听提交
        form.on('submit(submit)', function (data) {
            if (data.field.id === "") {
                CoreUtil.sendAjax("/dormitory/position/save", JSON.stringify(data.field), function (res) {
                    layer.msg(res.msg);
                }, "POST", false);
            }
            return false;
        });

    });
</script>
</html>
